import React from 'react';
import { Message, Balloon } from '@teamix/ui';
import { Title, ButtonIcon } from '@alife/devops-ui';
import DelPopup from 'components/PersonalSettings/components/confirmPopup';
import dayjs from 'dayjs';
import intl from 'components/PersonalSettings/components/locale';
import Icon from 'components/PersonalSettings/components/icon';
import CopyToClipboard from 'react-copy-to-clipboard';

const prefix = 'personal-access-token';

export default class TokenItem extends React.Component {
  state = {
    deletePopshow: false,
  };

  renderToken = (newToken) => {
    return (
      <div className="item-token">
        <Message title="访问令牌已创建，请注意保存，你只可见一次" type="success">
          <div className="content">
            {newToken.access_token}
            <Balloon.Tooltip
              trigger={
                <CopyToClipboard
                  text={newToken.access_token}
                  onCopy={() => {
                    Message.success({
                      title: '复制成功',
                    });
                  }}
                >
                  <ButtonIcon type="normal" name="copy-line" />
                </CopyToClipboard>
              }
              align="t"
              text={'复制'}
            />
          </div>
        </Message>
      </div>
    );
  };

  showPopup = (visible) => {
    this.setState({
      deletePopshow: visible,
    });
  };

  render() {
    const { item, newToken, updateData, onDeleteClick } = this.props;
    const { deletePopshow } = this.state;
    return (
      <div className={`${prefix}-list-item`} key={item.id}>
        <div className={'item-title'}>
          <div className="item-title-left">
            <div
              className="name"
              onClick={() => {
                updateData &&
                  updateData({
                    isModalShow: true,
                    modalData: item,
                    modalType: 'edit',
                    newToken: null,
                  });
              }}
            >
              <Title align="t" trigger={<span>{item.name}</span>}>
                {item.name}
              </Title>
            </div>
            <div className="create-at">
              {intl.get('created_at')}
              {dayjs(item.created_at).format('YYYY-MM-DD')}
            </div>
          </div>
          <div className="item-title-right">
            {intl.get('outdated_time')}：{dayjs(item.expire_time).format('YYYY-MM-DD')}
          </div>
        </div>
        <div className="item-desc">
          <div className="item-desc-left">
            <Title align="t" trigger={<span>{item.scope}</span>}>
              {item.scope}
            </Title>
          </div>
          <div className={`item-desc-right ${deletePopshow ? 'block' : ''}`}>
            <DelPopup
              onVisibleChange={this.showPopup}
              icon={<Icon type="warning-o" />}
              type="danger"
              title={intl.get('delete_token')}
              content={intl.get('delete_token_tip')}
              confirm={() => {
                onDeleteClick && onDeleteClick(item.id);
              }}
              align="l"
              trigger={<Icon type="trashbin" style={{ color: '#ff4f3e', cursor: 'pointer' }} />}
            />
          </div>
        </div>
        {newToken && item.id === newToken.id && this.renderToken(newToken)}
      </div>
    );
  }
}
